import QtQuick 1.0
import "models"
import "templates"
//import "js/main.js" as MainManager

Rectangle {
    id: productScreen
    color: "#00ffffff";

    Image {
        id: formBkg
        source: "images/backgrounds/app_bkg_360x640.png"
    }

    MouseArea{
        anchors.fill: parent
        onEntered: {
            parent.forceActiveFocus();}
        onClicked: {
            //parent.forceActiveFocus();
        }
    }

    Rectangle{
        color: "#00ffffff";
        id: name
        y: 10;
        anchors {
            left: parent.left;
            right: parent.right;
        }

        /** Name Field Label **/
        Label{
            id: nameLabel
            labelText: "Name"
            anchors {
                left: parent.left; leftMargin: 20;
                right: parent.right; rightMargin: 10;
            }
            width: parent.width;
        }

        /** Name Text Field **/
        TextField{
            id: nameText
            y: 30;
             color: "#00ffffff";
            anchors {
                left: parent.left; leftMargin: 10;
                right: parent.right; rightMargin: 10;
            }
        }
    }

    Row {
        id: productButtonConainer
        spacing: 10
        anchors {
            right: parent.right; rightMargin: 10
        }
        y: 210

        Button {
            buttonText: "Add product"
            buttonWidth: 140

            onActivated: {
                if(nameText.textValue != "" && amountText.textValue != "") {
                    mainContainer.getManager().setProduct(nameText.textValue, mainContainer.shoppingItemListModel, amountText.textValue, 0, muList.selectedMU, mainContainer.listIdMain);
                    mainContainer.state = "shoppingItemsState"
                }
            }
        }

        Button {
            buttonText: "Cancel"
            buttonWidth: 80

            onActivated: {
                mainContainer.state = "shoppingItemsState"
            }
        }
    }

    Rectangle{
        id: amountMU
         color: "#00ffffff";
        y: 110;
        anchors {
            left: parent.left;
            right: parent.right;
        }
        height: muList.height + 30

        /** Amount Field Label **/
        Label{
            y: 0
            id: amountLabel
            labelText: "Amount"
            anchors {
                left: parent.left; leftMargin: 20;
                right: parent.right; rightMargin: 10;
            }
            width: parent.width;
        }

        /** Amount Text Field **/
        TextField{
            id: amountText
            y: 30;
            width: 125;
            textValue: "1"
            textAlign: Text.AlignRight
            anchors {
                left: parent.left; leftMargin: 10;
            }
        }

        /** MU ChoiceList **/
        MetricItemsModel{ id: metricModel}
        ImperialItemsModel{ id: usModel}
        ChoiceList{
            id: muList
            y: 30;
            width: 190
            anchors{
                right: parent.right; rightMargin: 10;
            }
            height: 50
            collapsedHeight: 50;
            expandedHeight: 200;
            listModel: mainContainer.var_metric=="Metric" ? metricModel : usModel;
            listDelegate: MeasuringUnitListItem{ }
            Component.onCompleted: {
                for(var i = 0; i < muList.listModel.count; i++) {
                    if(muList.listModel.get(i).metricID == 1){
                        muList.itemsList.currentIndex = i;
                        break;
                    }
                }
            }
        }
    }

    /** Price Field Label
    Rectangle{
        id: price;
        anchors {
            top: amountMU.bottom; topMargin: 10;
            left: parent.left;
            right: parent.right;
        }

        Label{
            id: priceLabel
            labelText: "Price"
            anchors {
                left: parent.left; leftMargin: 20;
                right: parent.right; rightMargin: 10;
            }
            width: parent.width;
        }

        /** Price Text Field
        TextField{
            id: priceText
            y: 30;
            width: 125
            textValue: mainContainer.item_price
            textAlign: Text.AlignRight
            anchors {
                left: parent.left; leftMargin: 10;
            }
        }

        Label{
            anchors {
                bottom: priceText.bottom;bottomMargin: 2
                right: priceText.right; rightMargin: 15;
            }
            textAlign: Text.AlignRight;
            verticalAlign: Text.AlignBottom;
            labelText: mainContainer.currency
            fontSize: 10
            fontColor: "#add3f3"
        }
    }*/

    /** Load settings
    Component.onCompleted: {
        mainContainer.screenID = productScreen
        mainContainer.getManager().loadItemData(mainContainer.itemID);
    }*/
}
